<!--
 * @Author: panda-hbd 10254515+panda-hbd@user.noreply.gitee.com
 * @Date: 2022-11-13 12:11:29
<<<<<<< HEAD
 * @LastEditors: panda-hbd 1511539537@qq.com
 * @LastEditTime: 2022-11-17 14:48:48
=======
<<<<<<< HEAD
 * @LastEditors: panda-hbd 1511539537@qq.com
 * @LastEditTime: 2022-11-16 15:12:58
=======
>>>>>>> 9f55604ec48d362903f114d779f41dd57a57caa5
 * @LastEditors: panda-hbd 1511539537@qq.com
<<<<<<< HEAD
 * @LastEditTime: 2022-11-16 13:40:12
=======
 * @LastEditTime: 2022-11-16 09:12:23
<<<<<<< HEAD
=======
>>>>>>> e143db08c9b09eb6eb1041b520fcddb588b48be9
>>>>>>> 0d76f922e829fa5035c0d914043e2b813b38e33e
>>>>>>> 9f55604ec48d362903f114d779f41dd57a57caa5
 * @FilePath: \text-online-system\src\views\CourseInfo.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div style="width:100%;">
       <!-- 头部模块 -->
       <el-header id="header" style="position: relative;">
           <CommonHeader>
               <template #default>
                   <div style="display: flex;align-items: center;line-height: 4rem;">
                       <h3>课程中心</h3>
                       <el-button type="primary" text @click="open" v-if="this.$store.state.userType =='student'" style="margin-left: 1rem;">添加课程</el-button>
                       <el-button v-if="this.$store.state.userType =='teacher'" type="primary" style="margin-left: 1rem;">创建课程</el-button>
                   </div>

                   <!-- 删除课程 -->
                   <el-button text @click="centerDialogVisible = true" style="position: absolute;right: 2rem;top: 1rem;background-color:var(--yellowColor); color: #fff;">
                       删除课程
                   </el-button>

                   <!-- 删除课程弹窗 -->
                   <el-dialog
                       v-model="centerDialogVisible"
                       title="删除课程"
                       width="30%"
                       align-center
                   >

                   <!-- 弹窗内容 -->
                   <el-scrollbar height="10rem">
                       <el-form :model="form" label-width="120px">
                           <el-form-item label="课程名称">
                           <el-checkbox-group v-model="form.type">
                               <el-checkbox v-for="(course,index) in courseData" :key="index" :label="course.courseName" name="type" />
                           </el-checkbox-group>
                           </el-form-item>
                       </el-form>
                   </el-scrollbar>

                   <template #footer>
                   <span class="dialog-footer">
                       <el-button @click="centerDialogVisible = false">取消删除</el-button>
                       <!-- <el-button type="primary" @click="centerDialogVisible = false">
                       确认删除
                       </el-button> -->
                       <el-button type="primary" @click="onSubmit">确认删除</el-button>
                   </span>
                   </template>
                   </el-dialog>
               </template>
           </CommonHeader>
       </el-header>
       <!-- 主体内容 -->
       <el-main>
           <el-scrollbar height="39rem" wrap-class="scrollbar" view-style="display:flex;flex-wrap: wrap;justify-content: space-around;">
               <div v-for="item in courseData" :key="item" class="scrollbar-demo-item">
                   <h2>此科目：{{item.courseName}}</h2>
                       <div @click="toCourseDetail(item.id)">

                           <figure class="c4-izmir" tabindex="0"  style="width: 100%;height: 70%;position: absolute;;top: 0rem;left: 0rem;border-radius: 0;">
                               <!-- 课程图片 img -->
                               <img :src="item.img" alt="" style="height: 100%;width: 100%;"/>

                               <!-- 是否置顶 isTop -->
                               <p v-if="item.isTop == 1 ? true : false" style="position: absolute;width: 2rem;height: 1rem;left: 0;top: 0;background-color: blue;color: white;font-size: 0.5rem;">置顶</p>
                               <figcaption>
                                   <div class="c4-reveal-up">
                                   <h3>
                                       <!-- 课程名称 courseName -->
                                       {{item.courseName}}
                                       <br>
                                       <p style="font-size: 0.5rem;">{{item.courseDescription}}</p>
                                   </h3>
                                   </div>
                               </figcaption>
                           </figure>
                       </div>

                   <!-- </figure> -->
                   <div style="width: 100%;height: 30%;display: flex;align-items: center;position: absolute;bottom: 0;justify-content: space-around;">
                       <div style="display: flex;align-items: center;margin-right: 4rem;">

                           <!-- 教师头像 avatar -->
                           <img :src="item.avatar" alt="" style="width: 2.5rem;height: 2.5rem;border-radius: 50%;background-color: white;">
                           <p style="font-size: 0.5rem;color: black;margin-left: 0.5rem">
                               <!-- 教师名称 name -->
                               {{item.name}}
                           </p>
                       </div>
                       <div style="display: flex;margin-top: 1rem;">
                           <House style="width: 1em; height: 1em; margin-right: 8px;color: black;" />
                           <p style="font-size: 0.5rem;color: black;">
                               <!-- 所在班级 className -->
                               {{item.className}}
                           </p>
                       </div>
                   </div>
               </div>
           </el-scrollbar>
       </el-main>

   </div>
 </template>

<script>
import CommonHeader from '../components/CommonHeader.vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import course from '../api/course.js'
// import { value } from 'dom7';
export default {
   name: "CourseInfo",
   component: {
       CommonHeader,
   },
   data() {
       return {
           deleteFlag:true,
           centerDialogVisible:false,
           form:({
               type: [],
               }),
           courseData:[
           // "classId": 班级ID,
           // "courseName": 课程名称,
           // "img": 课程图片,
           // "code": 课程暗号,
           // "teacherId": 教师ID,
           // "isTop": 是否置顶,
           // "name": 教师名字,
           // "className": 班级名称,
           // "avatar": 教室头像,
           // "id": 1,
           // "courseDescription": 课程描述
           ],

       };
   },
   mounted() {
       course.queryAllCourseByStudentId(100).then((res)=>{
           if(res.code == 1)
              this.courseData = res.data;

       });
   },
   methods: {
       open(){
       ElMessageBox.prompt('请输入你要添加的课程名称', '添加课程', {
           confirmButtonText: '确认添加',
           cancelButtonText: '取消添加',
           inputValidator:((value) => {
               if(value != null){
                   for(let i = 0;i < this.courseData.length;i++){
                       if(value == this.courseData[i].code){
                           return "已添加该课程";
                       }
                   }
                   return true
               }
               return "请输入课程"
           })
       })
           .then(({ value }) => {
               //先通过暗号查询是否有此课程班级  value值为用户输入的课程暗号
               course.isHaveCourseByCode(value).then((res)=>{
                   console.log(res);
                   if(res.data == 1){//data返回值为 1：数据库有该课程，下一步执行添加课程
                       ElMessage({type: 'success', message: `添加课程成功`,
                       onClose:()=>{
                           course.addClassStudentByCourseCode(
                               {
                                   courseCode:value.trim(),
                                   userID:100
                               }).then((res)=>{
                               if(res.code == 1)
                               this.courseData = res.data;
                               })
                           }
                       })
                       }else{//data返回值为 0：数据库没有该课程
                           ElMessage({type: 'success', message: `没有此课程`,
                           })
                   }
               })
           })
           .catch(() => {
           ElMessage({
               type: 'info',
               message: '没有找到心仪课程？去大厅看看吧~',
           })
           })
       },
       toCourseDetail(id){
           this.$router.push({name:'topublicNotice',query:id})
       },
       onSubmit(){
           this.centerDialogVisible = false;

          let deleteIds= this.courseData.filter((value)=>{

               return this.form.type.includes(value.courseName)
               }).map((val)=>{

               return val.id
               })
          course.deleteClassStudentByCourseId({deleteIds:deleteIds,studentId:100}).then((res)=>{
               if(res.code == 1)
               this.courseData = res.data
          })
       },
       newCourse(){
        this.$router.push('/index/course')
       }
   },

   components: { CommonHeader }
}
</script>


<style  scoped>
#header{
    /* background-color: var(--blueColor); */
    background-color: #fff;
    color:var(--balckColor) ;
}
.el-scrollbar__view{
    display: flex;
    flex-wrap: wrap;
}
.scrollbar-demo-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 10rem;
  width: 18rem;
  margin: 1rem;
  text-align: center;
  border-radius: 0.1rem;
  background: var(--el-color-primary-light-9);
  color: var(--el-color-primary);
}
.addClass:hover{
    color: red;
}
.el-main{
    position: fixed;
    
}
</style>